import React from 'react'
import { changeNav,getProduct } from '../actions'
import { connect } from 'react-redux'
import { Tabs,Button,SearchBar,WingBlank,WhiteSpace,Grid  } from 'antd-mobile'
const TabPane = Tabs.TabPane
import hhistory from '../history'
import noimg from '../components/assets/default_small_img.png'

class AppMain extends React.Component{
	componentDidMount(){
		this.props.tochangeNav({title:"应用",rbtn:[
			<Button key="1" onClick={() => {
                hhistory.push('/shopcar')
			}} type="primary" inline size="small">购物车</Button>
		]})
		this.props.getProduct()
	}

	render(){
		// console.log( this.props.products )
		const data1 = [
						{
							icon:'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
							text:'智慧餐厅',
							target:'/smartDr'
						}

		]
		const data2 = [
						{
							icon:'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
							text:'短信充值',
							target:'/'
						}
		]
		return (
			<div>
					<WhiteSpace />
      			<Tabs defaultActiveKey="0" animated={false}>
						{ 
							this.props.products.map(
								( item,i )=>{
									console.log(item)
									return (
										<TabPane textColor='#7e7b74' tab={ item.productTypeName } key={i}>
												<Grid data={ item.productList } columnNum={3} renderItem={dataItem => (
													<div onClick={() => {
																hhistory.push( dataItem.target + '/'+dataItem.id)
															}} style={{ padding: '0.25rem',paddingTop:'0.4rem' }}>
														<img src={ dataItem.icon ? dataItem.icon : noimg } style={{ width: '55%', height: '55%',border:"0.02rem solid #cccccc",borderRadius:'0.12rem' }} alt="icon" />
														<div style={{ fontSize:"0.24rem" ,paddingTop:'0.24rem',marginBottom:'0.4rem'}}>
															{dataItem.text}
														</div>
													</div>
											  )}/>
									  </TabPane>
									)
								}
							) 
						}
							
			      
			    </Tabs>
			</div>
		)
	}
}

const mapStateToProps = ( state ) => ({
	products:state.products
})

const mapDispatchToProps = ( dispatch ) => {
	return{
		tochangeNav:navobj => dispatch( changeNav( navobj ) ),
		getProduct:( params ) => dispatch( getProduct(params) )
	}
}

export default connect(mapStateToProps,mapDispatchToProps)(AppMain)